<template>
  <div class="home-container flex-col">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>

      <div class="nav-head">
        <div class="nav-content flex-row-space-between">
          <img src="/static/assets/img/icon/icon-arrow-left-white.png" class="icon-back" @click="onClickBack"/>
          <div class="flex-col-v-center title">打卡记录</div>
          <div class="icon-back"></div>
        </div>
      </div>
    </div>

    <div class="table-container flex-col" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="h-10"></div>
      <div class="scroll-wrap flex-1 flex-col">
        <div class="table-head">
          <div class="table-head-holder flex-row-v-center">
            <div class="col-1 text-center">时间</div>
            <div class="col-2 text-center">类型</div>
            <div class="col-3 text-center">详情</div>
          </div>
        </div>

        <scroll-view scroll-y>
          <div class="item" v-for="item in recordList" :key="item.id" @click="goToRecordDetail(item)">
            <div class="item-holder flex-row-v-center">
              <div class="col-1 text-center">{{item.processCreateTime}}</div>
              <div class="col-2 text-center">
                <img :src="item.img_list_arr[0]"/>
                <img v-if="item.img_list_arr.length > 1" :src="item.img_list_arr[1]"/>
              </div>
              <div class="col-3 text-center">{{item.content}}</div>
            </div>
          </div>

          <div class="no-data flex-center" v-if="recordList.length <= 0">暂无记录</div>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        recordList: []
      }
    },

    onShow () {
      this._getRecordList()
    },

    methods: {
      onClickBack () {
        Core.Util.goBack()
      },

      goToRecordDetail (item) {
        Common.go('/pages/打卡记录/详情/main?id=' + item.id)
      },

      _getRecordList () {
        Core.Api.HospitalCard.getRecordList()
          .then(res => {
            let recordList = res.list
            recordList.forEach(v => {
              v.processCreateTime = Core.Util.timeFormat(v.create_time)
            })
            this.recordList = recordList
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home-container {
    background: #f9f9f9;
    position: relative;
    width: 100%;
    height: 100%;

    .nav-bar {
      background: rgba(14,197,169,1);
      .nav-content {
        padding: 10px 12px;
        position: relative;
        z-index: 1;

        .icon-back {
          width: 20px;
          height: 20px;
        }

        .title {
          height: 18px;
          font-size: 19px;
          line-height: 20px;
          color: #ffffff;
        }
      }
    }

    .h-10 {
      height: 10px;
      background: #f5f5f5;
    }

    .no-data {
      font-size: 14px;
      color:rgba(49,49,49,1);
      padding: 14px 0;
    }

    .table-container {
      width: 100%;
      height: 100%;
      .scroll-wrap {
        height: 100%;
        border: 1px solid #ececec;
        .col-1 {
          width: 25%;
        }
        .col-2 {
          width: 50%;
          img {
            width: 49px;
            height: 49px;
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        .col-3 {
          width: 25%;
        }
        .table-head {
          padding: 0 14px;
          height: 50px;
          .table-head-holder {
            height: 100%;
            font-size: 16px;
            color:rgba(14,197,169,1);
            border-bottom: 1px solid rgba(147,147,147,0.3);
          }
        }
        scroll-view {
          width: 100%;
          height: calc(100% - 50px);
          .item {
            height: 90px;
            padding: 0 14px;
            .item-holder {
              height: 100%;
              border-bottom: 1px solid rgba(147,147,147,0.3);
              font-size:14px;
              padding: 0 14px;
              color:rgba(49,49,49,1);
            }
            &:last-child {
              .item-holder {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
</style>
